<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/dropdown.css">
        <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <!-- Wrapper -->
        <div class="wrapper">
            <!-- Header -->
            <div class="header container">
                <div class="logo">
                    <img src="img/quanex-logo.png" alt="Quanex" />
                </div>
                <div class="status-information clearfix">
                    <span class="date" id="clock">03-May-2013 12:37:36</span>
                    <span class="status status-on">SAP ECC Status</span>
                </div>
                <div class="plant-information  push-right">
                    <div class="dropdown-list" id="plant-dropdown" tabindex="1">
                        <span></span>
                        <ul class="dropdown" tabindex="1"></ul>
                    </div>
                </div>
            </div>
            <!-- Header Ends -->
            <!-- Navigation -->
            <div class="navigation container">
                <ul>
                    <li>
                        <a href="#">Production Execution</a>
                    </li>
                    <li>
                        <a href="#">Quality Managment</a>
                    </li>
                    <li>
                        <a href="#">Plant Maintenance</a>
                    </li>
                    <li>
                        <a href="#">HR Integration</a>
                    </li>
                    <li>
                        <a href="#">IT Monitoring</a>
                    </li>
                </ul>
            </div>
            <div class="navigation-sub container">
                <ul>
                    <li>
                        <a href="#">Production Order Execution</a>
                    </li>
                    <li>
                        <a href="#">Setup Orders</a>
                    </li>
                    <li>
                        <a href="#">Setup Order Distribution</a>
                    </li>
                    <li>
                        <a href="#">Travellers Confirmation</a>
                    </li>
                    <li>
                        <a href="#">Work Center Overview</a>
                    </li>
                    <li>
                        <a href="#">Slit Coll Print</a>
                    </li>
                </ul>
            </div>
            <!-- Navigation Ends -->
            <div class="workcenter-overview container">
                <h1>Work Center Overview</h1>
                <div class="selector">
                    <div class="fieldset clearfix">
                        <label for="workcenter-selector">Work Center</label>
                        <div class="dropdown-list workcenter-selector" id="workcenter-dropdown" tabindex="1">
                            <span>Chatsworth, IL</span>
                            <ul class="dropdown" tabindex="1"></ul>
                        </div>
                    </div>
                    <div class="fieldset clearfix">
                        <label for="workcenter-desc">Work Center Description</label>
                        <input type="text" value="" id="workcenter-desc" disabled>
                    </div>
                    <table width="96%" class="filter-table">
                        <tr class="filter-row">
                            <td>
                                <label>Order Pool</label>
                            </td>
                            <td>Order
                                <input class="cus-search" type="text" data-search="0">
                            </td>
                            <td>Conf#
                                <input class="cus-search" type="text" data-search="12">
                            </td>
                            <td>Material
                                <input class="cus-search" type="text" data-search="4">
                            </td>
                            <td>Sched Start
                                <input type="text" id="dpFrom">To
                                <input type="text" id="dpTo">
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- Selector Ends -->
            </div>
            <div class="table-container container">
                <table width="96%" id="workcenter-table" class="data-table">
                    <thead>
                        <tr>
                            <th>Order</th>
                            <th>Sequence</th>
                            <th>Operation</th>
                            <th>Operation Status</th>
                            <th>Material</th>
                            <th>Material Description</th>
                            <th>Required Qty</th>
                            <th>Completed Qty</th>
                            <th>Scrap</th>
                            <th>UOM</th>
                            <th>Sched Start Date</th>
                            <th>Sched Finish Date</th>
                            <th>Conf#</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Order</td>
                            <td>Sequence</td>
                            <td>Operation</td>
                            <td>Operation Status</td>
                            <td>Material</td>
                            <td>Material Description</td>
                            <td>Required Qty</td>
                            <td>Completed Qty</td>
                            <td>Scrap</td>
                            <td>UOM</td>
                            <td>Sched Start Date</td>
                            <td>Sched Finish Date</td>
                            <td>Conf#</td>
                        </tr>
                    </tbody>
                </table>
                <div class="post-manual">
                    <button id="post-manual-conf" class="apply-shadow">Post Manual Conf</button>
                    <button class="apply-shadow">Cancel</button>
                </div>
                <div id="confirmation-dialog">
                    <p>There are no orders for this date range.</p>
                </div>
                <div id="post-conf-dialog" class="apply-shadow">
                    <div class="dialog-content-container">
                        <div id="tabs">
                            <ul>
                                <li>
                                    <a href="#tabs-1">Finish</a>
                                </li>
                                <li>
                                    <a href="#tabs-2">Print</a>
                                </li>
                            </ul>
                            <div id="tabs-1">
                                <a>
                                    <img src="img/quanex-logo.png" width="60%">
                                </a>
                                <div class="confirmation-form clearfix">
                                    <ol>
                                        <li>
                                            <label>Order</label>
                                            <input type="text" id="pOrderNumber" disabled/>
                                        </li>
                                        <li>
                                            <label>Material</label>
                                            <input type="text" id="pMaterial" disabled/>
                                        </li>
                                        <li>
                                            <label>Material Desc</label>
                                            <input type="text" id="pMaterialDesc" disabled/>
                                        </li>
                                        <li>
                                            <label>Operation</label>
                                            <input type="text" id="pOperation" disabled/>
                                        </li>
                                        <li>
                                            <label>Operation Desc</label>
                                            <input type="text" id="pOperationDesc" disabled/>
                                        </li>
                                        <li>
                                            <label>Workcenter</label>
                                            <input type="text" id="pWorkCenter" disabled/>
                                        </li>
                                        <li>
                                            <label>Workcenter Desc</label>
                                            <input type="text" id="pWorkCenterDesc" disabled/>
                                        </li>
                                        <li>
                                            <label>UOM</label>
                                            <input type="text" id="pUOM" disabled/>
                                        </li>
                                        <li>
                                            <label>Yeild</label>
                                            <input type="text" id="yeild-count" />
                                        </li>
                                        <li>
                                            <label>Scrap</label>
                                            <input type="text" id="scrap-count" />
                                        </li>
                                        <li>
                                            <button class="apply-shadow" id="conf-submit">Sumbit</button>
                                            <button class="apply-shadow">Cancel</button>
                                        </li>
                                    </ol>
                                </div>
                            </div>
                            <div id="tabs-2">
                                <div class="print-form clearfix">
                                    <ol>
                                        <li>
                                            <label>Printer</label>
                                            <select id="printers-select"></select>
                                        </li>
                                        <li>
                                            <label>No of pieces/Carton</label>
                                            <input type="text" id="carton-pieces" />
                                        </li>
                                        <li>
                                            <label>No of Cartons</label>
                                            <input type="text" id="cartons" />
                                        </li>
                                        <li>
                                            <button class="apply-shadow" id="print-submit">Print</button>
                                        </li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Wrapper Ends -->
        <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
        <script src="js/main.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
        <script src="js/jquery.xml2json.js" type="text/javascript"></script>
        <script type="text/javascript">
            var xmlPath = "../../../";

            var plantListURL = "XMII/Illuminator?QueryTemplate=Quanex_IntegrationApps/Common/Queries/getPlantListXacQry";
            var workCenterListURL = "XMII/Illuminator?QueryTemplate=Quanex_IntegrationApps/Common/Queries/getWorkCenterListXacQry";
            var printerDetailsURL = "XMII/Illuminator?QueryTemplate=Quanex_IntegrationApps/ProductionIntegration/PrintLabel/Queries/getPrinterDetailsXacQry";
            var wcOrderPoolListURL = "XMII/Illuminator?QueryTemplate=Quanex_IntegrationApps/ProductionIntegration/ProductionPlanning/Queries/getWCOrderPoolListXacQry";
            var postConfirmationURL = "XMII/Illuminator?QueryTemplate=Quanex_IntegrationApps/ProductionIntegration/ProductionPlanning/Queries/postOperationConfirmationXacQry";
            var postPrinterConfURL = "XMII/Illuminator?QueryTemplate=Quanex_IntegrationApps/ProductionIntegration/PrintLabel/Queries/sendPrintLabelRequestXacQry"; 
             
             //alert(document.location.host);
             //var plantListURL = 'data/getPlantListXacQry.xml';
             //var workCenterListURL = 'data/getWorkCenterListXacQry.xml';
             //var printerDetailsURL = 'data/getPrinterDetailsXacQry.xml';

            var plantId = '';
            var plantName = '';
            var workcenterId = '';
            var orderNumber = '';
            var operationNumber = '';
            var printerId = '';

            var selectedFromDate = '';
            var selectedToDate = '';
            var firstTime = true;

            function DropDown(el) {
                this.dd = el;
                this.placeHolder = this.dd.children('span');
                this.opts = this.dd.find('ul.dropdown >li');
                this.val = '';
                this.index = -1;
                this.initEvents();
            }
            DropDown.prototype = {
                initEvents: function() {
                    var obj = this;

                    obj.dd.on('click', function(event) {

                        $(this).toggleClass('active');
                        event.stopPropagation();
                    });

                    obj.opts.on('click', function() {
                        var opt = $(this);
                        obj.val = opt.text();
                        obj.index = opt.index();
                        obj.placeHolder.text(obj.val);

                    });
                },
                getValue: function() {
                    return this.val;
                },
                getIndex: function() {
                    return this.index;
                }
            }

            $(function() {
                oTable = $('#workcenter-table').dataTable({

                });

                $(".cus-search").keyup(function() {
                    /* Filter on the column (the index) of this element */
                    oTable.fnFilter(this.value, $(this).data("search"));

                });

                oTable.on("click", "tr", function(event){
                        var data = oTable.fnGetData(this);
                        // ... do something with the array / object of data for the row
                        console.log(data);
                        
                        orderNumber = data.ORDERNUMBER;
                        operationNumber = data.OPERATIONNUMBER;
                        
                        $("#pOrderNumber").val(data.ORDERNUMBER);
                        $("#pMaterial").val(data.MATERIALNUMBER);
                        $("#pMaterialDesc").val(data.MATERIALDESCRIPTION);
                        $("#pOperation").val(data.OPERATIONNUMBER);
                        $("#pOperationDesc").val(data.OPERATIONDESCRIPTION);
                        $("#pWorkCenter").val(data.WORKCENTER);
                        $("#pWorkCenterDesc").val(data.WORKCENTERDESC);
                        $("#pUOM").val(data.UOM);
                    });


                    $("#workcenter-table tbody").click(function(event) {
                        $(oTable.fnSettings().aoData).each(function() {
                            $(this.nTr).removeClass('selected');

                        });

                        $(event.target.parentNode).addClass('selected');
                        $("#post-manual-conf").removeAttr("disabled", "disabled");
                });
                
                $(document).click(function() {
                    // all dropdowns close
                    $('.dropdown-list').removeClass('active');


  
                  /*  oTable.$('tr').click(function() {
                        var data = oTable.fnGetData(this);
                        // ... do something with the array / object of data for the row
                        console.log(data);
                        
                        orderNumber = data.ORDERNUMBER;
                        operationNumber = data.OPERATIONNUMBER;
                        
                        $("#pOrderNumber").val(data.ORDERNUMBER);
                        $("#pMaterial").val(data.MATERIALNUMBER);
                        $("#pMaterialDesc").val(data.MATERIALDESCRIPTION);
                        $("#pOperation").val(data.OPERATIONNUMBER);
                        $("#pOperationDesc").val(data.OPERATIONDESCRIPTION);
                        $("#pWorkCenter").val(data.WORKCENTER);
                        $("#pWorkCenterDesc").val(data.WORKCENTERDESC);
                        $("#pUOM").val(data.UOM);
                    });


                    $("#workcenter-table tbody").click(function(event) {
                        $(oTable.fnSettings().aoData).each(function() {
                            $(this.nTr).removeClass('selected');

                        });

                        $(event.target.parentNode).addClass('selected');
                        $("#post-manual-conf").removeAttr("disabled", "disabled");
                    });*/
                });

            });

            $(document).ready(function() {
                $("#tabs").tabs();
                $("#post-manual-conf").attr("disabled", "disabled");
                $('.dropdown-list').removeClass('active');



                $("#post-manual-conf").click(function(e) {
                    $("#post-conf-dialog").dialog({
                        modal: true,
                        title: "Manual Confirmation",
                        width: 360
                    });
                    e.preventDefault();
                })

                    $("#conf-submit").click(function(e){
                        postOperationConfirmation();
                    });
                    $("#print-submit").click(function(e){
                        postPrintConfirmation();
                    });
                setInterval('updateClock()', 1000);
                selectedFromDate = getCurrentDate();
                selectedToDate = getCurrentDate();
                initDatePicker();
                loadXML(plantListURL, '', parsePlantXML);

            });


            $(document).ajaxComplete(function() {
                $('body').css({'cursor':'default'})
            });
          

            function loadXML(xm, param, callback) {
                $('body').css({'cursor':'wait'})
                $.ajax({
                    type: "GET",
                    url: xmlPath + xm + param + '&Content-Type=text/xml',
                    cache: false,
                    dataType: "xml",
                    success: callback
                });
            }

            function parseWorkCenterXML(xml) {
                var wcJSON = $.xml2json(xml);
                var wcList = $('#workcenter-dropdown ul');
                $('#workcenter-dropdown ul > li').remove();

                for (i = 0; i < wcJSON.Rowset.Row.length; i++) {
                    var obj = wcJSON.Rowset.Row[i];
                    wcList.append($('<li>').append($('<a>').attr('data-val', i).append(obj.WORKCENTER)));
                }
                $("#workcenter-desc").val(wcJSON.Rowset.Row[0].WORKCENTERDESC);
                $('#workcenter-dropdown span').html(wcJSON.Rowset.Row[0].WORKCENTER);


                /*Dropdown*/
                if(firstTime){
                    var workCenterDropDown = new DropDown($('#workcenter-dropdown'));
                    firstTime = false;
                }
                $('#workcenter-dropdown li').click(function() {
                    oTable.fnClearTable();
                    var selectedIndex = $(this).find('a').attr('data-val');
                    $("#workcenter-desc").val(wcJSON.Rowset.Row[selectedIndex].WORKCENTERDESC);


                    plantId = wcJSON.Rowset.Row[selectedIndex].PLANTID;
                    workcenterId = wcJSON.Rowset.Row[selectedIndex].WORKCENTERID;

                    loadWcPoolList();
                });
                plantId = wcJSON.Rowset.Row[0].PLANTID;
                workcenterId = wcJSON.Rowset.Row[0].WORKCENTERID;
                loadWcPoolList();
            }

            function loadWcPoolList() {

                var param11 = "&Param.1=" + plantId;
                var param12 = "&Param.2=" + workcenterId;
                var param13 = "&Param.3=" + selectedFromDate;
                var param14 = "&Param.4=" + selectedToDate;
                console.log(plantId + '45454   ' + selectedFromDate);
                loadXML(wcOrderPoolListURL, param11 + param12 + param13 + param14, parseWCOrderPoolListXML);
            }
            function postOperationConfirmation(){
                var param1 = "&Param.1=" + orderNumber;
                var param2 = "&Param.2=" + operationNumber;
                var param3 = "&Param.3=" + $("#yeild-count").val();
                var param4 = "&Param.4=" + $("#scrap-count").val();
                var param5 = "&Param.5=" + '';
                var param6 = "&Param.6=" + '0';
                loadXML(postConfirmationURL, param1 + param2 + param3 + param4 + param5 + param6, parsePostConfResult);
            }
            function postPrintConfirmation(){
                var param1 = "&Param.1=" + plantId;
                var param3 = "&Param.3=" + '000000';
                var param4 = "&Param.4=" + printerId;
                var param5 = "&Param.5=" + $("#carton-pieces").val();
                var param6 = "&Param.6=" + $("#cartons").val();
                var param7 = "&Param.7=" + orderNumber;
                loadXML(postPrinterConfURL, param1 + param3 + param4 + param5 + param6 + param7, parsePrinterConfResult);
            }
            
             function parsePrinterConfResult(xml){
                var confResult = $.xml2json(xml)
                console.log(confResult);
                
                var data = confResult.Rowset.Row;
                console.log(data.STATUS);
                console.log(data.OUTPUTMESSAGE);
                openConfirmationDialog(data.OUTPUTMESSAGE);
                if(data.STATUS == "1"){
                   
                    $("#tabs").tabs({
                        active: 1
                    });
                    
                }else {
                    
                }
            
            }
            
            function parsePostConfResult(xml){
                var confResult = $.xml2json(xml)
                console.log(confResult);
                
                var data = confResult.Rowset.Row;
                console.log(data.STATUS);
                console.log(data.OUTPUTMESSAGE);
                openConfirmationDialog(data.OUTPUTMESSAGE);
                if(data.STATUS == "1"){
                   
                    $("#tabs").tabs({
                        active: 1
                    });
                    loadWcPoolList();
                }else {
                    
                }
            
            }
            function parseWCOrderPoolListXML(xml) {
                var poolListJSON = $.xml2json(xml);


                var data = poolListJSON.Rowset.Row;


                if (data != undefined) {

                    $('#workcenter-table').dataTable({
                        "bProcessing": true,
                        "bDestroy": true,
                        "aaData": data,
                        "aoColumns": [{
                                "mData": "ORDERNUMBER"
                            }, {
                                "mData": "SEQUENCENUMBER"
                            }, {
                                "mData": "OPERATIONNUMBER"
                            }, {
                                "mData": "OPERATIONSTATUS"
                            }, {
                                "mData": "MATERIALNUMBER"
                            }, {
                                "mData": "MATERIALDESCRIPTION"
                            }, {
                                "mData": "REQUIREDQTY"
                            }, {
                                "mData": "CONFIRMEDYIELDQTY"
                            }, {
                                "mData": "CONFIRMEDSCRAPQTY"
                            }, {
                                "mData": "UOM"
                            }, {
                                "mData": "SCHEDULESTARTDATETIME"
                            }, {
                                "mData": "SCHEDULEFINISHDATETIME"
                            }, {
                                "mData": "CONFNUMBER"
                            }
                        ]
                    });

                    oTable.fnAdjustColumnSizing();
                } else {
                   openConfirmationDialog('There are no orders for this date range.');
                }
            }
            function openConfirmationDialog(msg){
                 $("#confirmation-dialog p").html(msg);
                 $("#confirmation-dialog").dialog({
                        modal: true,
                        title: "Information",
                        width: 200,
                        buttons: {
                            Ok: function() {
                                $(this).dialog("close");
                            }
                        }
                    });
                    $(".ui-dialog-titlebar-close span.ui-button-text").html('x');
            }
            function parsePlantXML(xml) {
                var plantJSON = $.xml2json(xml);
                for (i = 0; i < plantJSON.Rowset.Row.length; i++) {
                    var obj = plantJSON.Rowset.Row[i];
                    $('#plant-dropdown ul').append($('<li>').append($('<a>').attr('data-val', i).append(obj.PLANTNAME)));
                }
                $('#plant-dropdown span').html(plantJSON.Rowset.Row[0].PLANTNAME);

                /*Dropdown*/
                var plantDropDown = new DropDown($('#plant-dropdown'));
                $('#plant-dropdown li').click(function() {
                    var selectedIndex = $(this).find('a').attr('data-val');
                    var selectedParam = '&Param.1=' + plantJSON.Rowset.Row[selectedIndex].PLANTID;
                    loadXML(workCenterListURL, selectedParam, parseWorkCenterXML);

                    var printParam = "&Param.1=" + plantJSON.Rowset.Row[selectedIndex].PLANTID;
                    loadXML(printerDetailsURL, printParam, parsePrintersXML);

                    oTable.fnClearTable();
                })


                var param = "&Param.1=" + plantJSON.Rowset.Row[0].PLANTID;
                loadXML(workCenterListURL, param, parseWorkCenterXML);

                var printParam = "&Param.1=" + plantJSON.Rowset.Row[0].PLANTID;
                loadXML(printerDetailsURL, printParam, parsePrintersXML);
            }

            function getTimeStamp() {
                var dt = new Date();
                var currentTime = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
            }

            function parsePrintersXML(xml) {
                var printerJSON = $.xml2json(xml);



                printerId = printerJSON.Rowset.Row[0].PRINTERID;
                
                $.each(printerJSON.Rowset.Row, function(key, val) {
                    $("#printers-select").append('<option id="' + val.PRINTERID + '">' + val.PRINTERNAME + '</option>');
                })
                $('select').on('change', function() {
                  printerId = $(this).children(":selected").attr("id");
                });
            }

            function updateClock() {
                var currentTime = new Date();
                var currentHours = currentTime.getHours();
                var currentMinutes = currentTime.getMinutes();
                var currentSeconds = currentTime.getSeconds();

                // Pad the minutes and seconds with leading zeros, if required
                currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
                currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

                // Choose either "AM" or "PM" as appropriate
                var timeOfDay = (currentHours < 12) ? "AM" : "PM";

                // Convert the hours component to 12-hour format if needed
                currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

                // Convert an hours component of "0" to "12"
                currentHours = (currentHours == 0) ? 12 : currentHours;

                // Compose the string for display
                var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

                $("#clock").html(currentTimeString);

            }

            function initDatePicker() {
                var dpFrom = $("#dpFrom").datepicker({
                    onSelect: function(e, f) {
                        console.log({
                            e: e,
                            f: f,
                            date: new Date()
                        });
                        var dateObj = new Date(f.selectedYear, f.selectedMonth, f.selectedDay);
                        selectedFromDate = getFormattedDate(f, dateObj);

                        console.log(selectedFromDate);


                        loadWcPoolList();
                    }
                });
                var dpTo = $("#dpTo").datepicker({
                    onSelect: function(e, f) {
                        console.log({
                            e: e,
                            f: f,
                            date: new Date()
                        });
                        var dateObj = new Date(f.selectedYear, f.selectedMonth, f.selectedDay);
                        selectedToDate = getFormattedDate(f, dateObj);

                        console.log(selectedToDate);
                    }
                });
                dpFrom.datepicker({
                    dateFormat: 'yy-mm-dd'
                });
                dpTo.datepicker({
                    dateFormat: 'yy-mm-dd'
                });

                dpTo.datepicker("setDate", new Date());
                dpFrom.datepicker("setDate", new Date());
                //setFormattedDate('20130908', dpFrom);
            }

            function setFormattedDate(str, dp) {
                var myD = str.match(/.{1,2}/g);
                console.log(myD[0] + myD[1]);

                dp.datepicker("setDate", new Date(myD[0] + myD[1], myD[2] - 1, myD[3]));
            }

            function getFormattedDate(f, dateObj) {
                return [dateObj.getFullYear(), ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"][dateObj.getMonth()], (f.selectedDay.length < 2) ? "0" + dateObj.getDate() : dateObj.getDate()].join('') + '000000';
            }

            function getCurrentDate() {
                var curDate = new Date();
                return [curDate.getFullYear(), ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"][curDate.getMonth()], (curDate.getDate().length < 2) ? "0" + curDate.getDate() : curDate.getDate()].join('') + '000000';
            }
        </script>
    </body>

</html>